<template>
  <div class="app-container pg-dict-data">
    <!-- top-search begin -->
    <div class="top-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="dictType">
          <dg-service-select
            class="w-full"
            :dataType="10000"
            v-model="searchForm.dictType"
            placeholder="请选择字典名称"
            clearable
            @change="search()">
          </dg-service-select>
        </el-form-item>
        <el-form-item prop="dictLabel">
          <el-input
            v-model="searchForm.dictLabel"
            placeholder="请输入字典标签"
            clearable
            @keyup.enter.native="search()" />
        </el-form-item>
        <el-form-item prop="status">
          <dg-dict-select
            dictType="sys_normal_disable"
            v-model="searchForm.status"
            clearable
            placeholder="请选择字典状态"
            @change="search()" />
        </el-form-item>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button
          v-hasPermi="['system:dict:add']"
          type="primary"
          icon="el-icon-plus"
          @click="handleShow()">新增</el-button>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table mt10" :data="tableData" border stripe>
      <el-table-column show-overflow-tooltip label="字典编码" prop="dictCode" align="center" min-width="78" />
      <el-table-column show-overflow-tooltip label="字典标签" prop="dictLabel" align="center" min-width="78" />
      <el-table-column show-overflow-tooltip label="字典键值" prop="dictValue" align="center" min-width="78" />
      <el-table-column show-overflow-tooltip label="字典排序" prop="dictSort" align="center" min-width="78" />
      <el-table-column show-overflow-tooltip label="字典状态" prop="dictId" align="center" min-width="78">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="字典备注" prop="remark" align="center" min-width="300" />
      <el-table-column show-overflow-tooltip label="创建时间" prop="createTime" align="center" min-width="158" />
      <el-table-column
        label="操作"
        width="82"
        fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-button class="opera-item" type="text" @click="handleShow(scope.row.dictCode)">修改</el-button>
            <el-button class="opera-item" type="text" @click="handleDelete(scope.row.dictCode)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table end -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange" />
    <!-- page-pagination end -->

    <!-- dialog-dict-data begin -->
    <dialog-dict-data :show.sync="dialogDictData" :id="typeId" :type="searchForm.dictType" :status="dialogType"></dialog-dict-data>
    <!-- dialog-dict-data end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import DialogDictData from './components/dialog-dict-data';
import * as API_Dict_Data from '@/api/system/dict/data';

export default {
  name: 'pg-dict-data',
  components: {
    DialogDictData
  },
  mixins: [mixin, listmixin],
  dicts: ['sys_normal_disable'],
  data() {
    return {
      searchForm: {
        dictType: undefined,
        dictLabel: undefined,
        status: undefined
      },
      // 字典表格数据
      tableData: [],

      // 字典值弹层
      dialogDictData: false,
      dialogType: undefined,
      typeId: undefined,
      typeType: undefined,

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  created () {
    const { type } = this.$route.query;
    this.searchForm.dictType = type;
  },
  mounted () {
    this.search();
  },
  methods: {
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_params.dateRange && _params.dateRange.length) {
        _params.beginTime = _params.dateRange[0];
        _params.endTime = _params.dateRange[1];
      };
      delete _params.dateRange;
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {查询字典类型列表}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Dict_Data.getListService(_params).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {字典类型新增/修改}
    */
    handleShow (_code, _type) {
      this.typeId = _code;
      this.typeType = _type;
      this.dialogType = _code || _code === 0 ? 'edit' : 'new';
      this.dialogDictData = true;
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {删除字典类型}
    */
    /** 删除按钮操作 */
    handleDelete(_id) {
      this.$modal.confirm(`是否确认删除字典编号为 ${_id} 的数据项？`).then(() => {
        return API_Dict_Data.delService(_id);
      }).then(() => {
        this.search();
        this.$msgSuccess('删除成功');
        this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
      }).catch(() => {});
    }
  }
};
</script>